<template>
  <div class="img-detail">
    <myheader titleName='图文详情'></myheader>
    <div>
      <h3 class="img-title">{{imgInfo.title}}</h3>
      <p class="img-info">
        <span class="time">{{imgInfo.add_time | fmtTime}}</span>
        <span>{{imgInfo.click}}次点击</span>
        <span>分类：xxx</span>
      </p>
    </div>
    <ul>
      <li>
        <vue-preview :slides="imgList" @close="handleClose"></vue-preview>
      </li>
    </ul>
    <div class="content" v-html='imgInfo.content'></div>
    <comment :id='id'></comment>
  </div>
</template>
<script>
import myheader from '@/components/myheader'
import comment from '@/components/comment'
import { getThumb, getImgInfo } from '@/api'
export default {
  components: {
    myheader,
    comment
  },
  data () {
    return {
      id: this.$route.params.id,
      imgInfo: {},
      imgList: []
    }
  },
  created () {
    this.initThumb()
    this.initImgInfo()
  },
  methods: {
    // 初始化缩略图方法
    initThumb () {
      getThumb(this.id).then(res => {
        console.log(res)
        // 拼接数据，因为vue-preview组件需要传递的数组里面有src(大图)，msrc（小图），w（宽），h（高）这些属性
        res.message.map(item => {
          item.msrc = item.src
          item.w = 600
          item.h = 400
        })
        this.imgList = res.message
      })
    },
    // 初始化缩略图信息
    initImgInfo () {
      getImgInfo(this.id).then(res => {
        console.log(res)
        this.imgInfo = res.message[0]
      })
    },
    handleClose () {
      console.log('close event')
    }
  }
}
</script>

<style lang="scss">
  img {
    width: 100%;
    height: 100%;
  }
  li > div > div {
    display: flex;
    flex-wrap: wrap;
    & > figure {
      width: 33.33%;
    }
  }
</style>

<style lang="scss" scoped>
  .img-detail {
    margin-top: 40px;
    margin-bottom: 55px;

    .img-title {
      font-size: 16px;
      font-weight: bold;
    }
    .img-info {
      display: flex;
      justify-content: space-around;
      color: #26a2ff;
      font-size: 14px;
    }
    .content {
      font-size: 14px;
    }
  }
</style>
